<template>
    <div class="div1" style="margin-left: 0px">
        <div style="background: #000000;width: 600px;height: 500px;margin-left: -20px;margin-top: -40px">
          <img src="/src/assets/img/index.png" style="width: 300px;height: 80px;margin-left: 130px;margin-top: 100px">
          <p style="font-size: 30px;margin-left: 130px;color: white">神州租车-大品牌, 放心租</p>
        </div>
        <div  style="background: #F5F5F5;width: 600px;height: 500px;margin-left: 580px;margin-top: -500px;overflow: hidden">
          <p style="font-size: 30px;margin-left: 50px;margin-top: 50px">登录</p>
          <el-input v-model="carLogin.email" placeholder="请输入您的邮箱" style="width: 500px;margin-left: 50px;margin-top: 20px"></el-input>
          <el-input v-model="carLogin.code" placeholder="请输入图片验证码" style="width: 330px;margin-left: 50px;margin-top: 20px"></el-input>
          <el-input v-model="carLogin.emailCode" placeholder="请输入邮箱验证码" style="width: 330px;margin-left: 50px;margin-top: 20px"></el-input>
          <div @click="refreshCode()" class="code" style="cursor:pointer;margin-left: 400px;margin-top: -93px" title="点击切换验证码">
            <s-identify :identifyCode="identifyCode"></s-identify>
          </div>
          <el-button slot="append" style="color: white;background-color: #3c8dbc;margin-top: 15px;margin-left: 400px"  v-show="showTime" @click="sendEmail(carLogin.email)">发送验证码</el-button>
          <el-button slot="append" style="color: white;background-color: #3c8dbc;margin-left: 0px;margin-top: 15px;margin-left: 400px;overflow: hidden"  v-show="!showTime" >{{sendTime}}秒</el-button>
          <el-row>
            <el-button type="warning" style="margin-top: 50px;margin-left: 140px;width: 300px"@click="getUserByEmail()">登录</el-button>
          </el-row>
        </div>
    </div>
</template>

<script>
  import sIdentify from './sIdentify.vue';
  export default {
  components: { sIdentify },
  data(){
    return{
      emailCode:'',
      carLogin:{
        email:'',
        code:'',
        emailCode:''
      },
      showTime: true, /* 布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
      sendTime: '', /* 倒计时 计数器 */
      timer: null,
      identifyCode: "",
      identifyCodes: ['0','1','2','3','4','5','6','7','8','9','a','b','c','d'], //根据实际需求加入自己想要的字符
      dialogTableVisible:true,
      time:60,
    }
  },
    created() {
      this.refreshCode()
    },
    methods:{
      init () {
        this.dialogTableVisible =true
      },
      /*发送验证码时，开始计数，一分钟发送一次*/
      overSendEmail(){
        this.time = 60; //  更改倒计时时间
        this.showTime = true
      },
      sendEmail(){
        this.showTime = false
        this.sendTime = 60;//  更改倒计时时间
        this.getEmailCode()

        if (!this.timer) {
          this.sendTime =  this.time;
          this.showTime = false;
          this.timer = setInterval(() => {
            if (this.sendTime > 0 && this.sendTime <=   this.time) {
              this.sendTime--;
            } else {
              this.showTime = true;
              clearInterval(this.timer); // 清除定时器
              this.timer = null;
            }
          }, 1000);
        }
      },
     // 生成随机数
      randomNum(min, max) {
        max = max + 1
        return Math.floor(Math.random() * (max - min) + min);
      },
      // 更新验证码
      refreshCode() {
        this.identifyCode = "";
        this.makeCode(this.identifyCodes, 4);
        console.log('当前验证码:',this.identifyCode);
      },
      // 随机生成验证码字符串
      makeCode(data, len) {
        console.log('data, len:', data, len)
        for (let i = 0; i < len; i++) {
          this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length-1)]
        }
      },
      getUserByEmail(){
        this.$http({
          url: this.$http.adornUrl(`/yonghu/getUserByEmail/${this.carLogin.email}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data})=>{
          if(data.user ==null){
            this.$message({
              message: '您还未注册，即将为您注册',
            });
            this.insert()
          }else {
            this.Login()
          }
        }).catch(({err})=>{
          console.log(err)
        })
      },
      getEmailCode(){
        this.$http({
          url: this.$http.adornUrl(`/yonghu/getEmailCode/${this.carLogin.email}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data})=>{
          if(data.code==0){
            this.$message({
              message: '邮件发送成功',
              type: 'success'
            });
          }else {
            this.$message.error('邮件发送失败，请重试');
          }
        }).catch(({err})=>{
          console.log(err)
        })
      },
      Login(){
        if(this.carLogin.code == this.identifyCode){
          this.$http({
            url: this.$http.adornUrl('/yonghu/Login'),
            method: 'post',
            data: this.$http.adornData({
              'email': this.carLogin.email,
              'emailCode': this.carLogin.emailCode,
            })
          }).then(({data})=>{
            if (data.code==0){
              this.$message({
                message: '登陆成功',
                type: 'success'
              });
              sessionStorage.setItem("user",data.data.user.userName);
              sessionStorage.setItem("email",data.data.user.email);
              sessionStorage.setItem("userId",data.data.user.id);
              this.dialogTableVisible =false
              window.location.reload();
            }else if(data.code==1){
              this.$message({
                message: data.message,
                type: 'warning'
              });
            }else if(data.code ==2) {
              this.$message({
                message: data.message,
                type: 'warning'
              });
            }
          }).catch(({err})=>{
            console.log(err)
          })
        }else {
          this.$message({
            message: '图片验证码输入错误，请您重新输入',
            type: 'warning'
          });
          this.refreshCode()
        }
      },
      insert(){
        this.$http({
          url: this.$http.adornUrl('/yonghu/insert'),
          method: 'post',
          data: this.$http.adornData({
            'email': this.carLogin.email,
            'emailCode': this.carLogin.emailCode,
          })
        }).then(({data})=>{
            if(data.code ==0){
              this.$message({
                message: '注册成功,请您重新登陆',
                type: 'success'
              });
              this.carLogin.email = null;
              this.carLogin.code = null;
              this.carLogin.emailCode = null;
              this.refreshCode();
              this.overSendEmail()
            }else {
              this.$message({
                message: '注册失败,请您重新注册',
                type: 'success'
              });
              this.refreshCode();
              this.overSendEmail()
            }
        }).catch(({err})=>{
          console.log(err)
        })
      }
    }
  }
</script>

<style scoped>
.div1 >>> .el-dialog__header{
  display: none;
}
.div1 >>> .el-dialog__body{
  padding-left: 0px !important;
}
</style>
